<template>
  <!-- 我的组织关系转接历史页面 -->
  <div class="history">
    <el-table class="historyForm" :data="switchList" height="560" border>
        <el-table-column
          prop="name"
          label="发起人">
        </el-table-column>
        <el-table-column
          prop="strTime"
          label="申请时间">
        </el-table-column>
        <el-table-column
          prop="endTime"
          label="完成时间">
        </el-table-column>
        <el-table-column
          prop="transferout"
          label="转出党组织">
        </el-table-column>
          <el-table-column
          prop="transferin"
          label="转入团组织">
        </el-table-column>
         <el-table-column
          prop="typesof"
          label="转接类型">
        </el-table-column>
         <el-table-column
          prop="state"
          label="">
        </el-table-column>
         <el-table-column
          prop="operate"
          label="操作">
        </el-table-column>
      </el-table>
      <div class="paginationBlock">
        <el-pagination  @size-change="handleSizeChange"
         @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
         layout="total,prev, pager, next,jumper" :total="total">
        </el-pagination>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      switchList:[
        // {//组织关系转接历史列表
        //   name:"",//发起人姓名
        //   strTime:"",//申请时间
        //   endTime:"",//完成时间
        //   transferout:"",//转出党组织
        //   transferin:"",//转入团组织
        //   typesof:"",//转接类型
        //   state:"",//处理状态
        //   operate:"",//操作
        // }
      ],
      total:0,
      currentPage: 1,
      pageSize: 7,
    }
  },
  methods:{
    handleCurrentChange(val){//点击获取页码
      this.currentPage = val
      // this.userList()
      this.currentPage = 1
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      // this.userList()
    },
  }
}
</script>

<style lang="scss">
  .history{
    .historyForm{
      .has-gutter{
        th{
            text-align: center;
        }
      }
      .el-table__body{
        .el-table__row{
            td{
                text-align: center;
            }
        }
      }
    }
    .paginationBlock{
      position: absolute;
      bottom: 5vh;
      left: 0;
      width: 100%;
      .el-pagination{
        // position: absolute;
        // bottom: 14vh;
        // left: 40%;
        text-align: center;
      }
      .el-pager li{
        background: none;
      }
      .btn-next,.btn-prev{
        background: none;
      }
    }
  }
</style>